<template>
  <div id="formBody" class="center">
    <div
      @mouseenter="coverIt(item,index)"
      :class="['formItem',item.rendered?'':'rendering',item.selected?'selected':'']"
      :key="index"
      v-for="(item,index) in $parent.items"
    >
      <div v-if="item.label" class="label">{{item.label}}</div>
      <div class="field">
        <field :data="item" />
      </div>
    </div>
    <div v-if="$parent.items.length<1" class="span">
      <div class="tip">从左侧工具栏拖入元素</div>
    </div>
  </div>
</template>
<script>
import field from "./field";
export default {
  components: { field },
  data() {
    return {};
  },
  mounted() {},
  methods: {
    //鼠标移动到表单域上的时候，需要有一个遮罩把它遮住，目的是避免表单域获得输入光标
    coverIt(item, index) {
      if (this.$root.form.curField) return;
      let dom = document.querySelector("#formFieldCover");
      let self = this;
      if (!dom) {
        dom = document.createElement("div");
        dom.id = "formFieldCover";
        dom.style.position = "absolute";
        dom.style.zIndex = 9;
        document.body.append(dom);
        dom.addEventListener("mouseleave", e => {
          dom.style.top = "-10000px";
        });
        dom.addEventListener("mousedown", e => {
          self.$parent.items[self.$parent.selectedIndex].selected = false;
          self.$parent.items[dom.dataset.index].selected = true;
          self.$parent.selectedIndex = dom.dataset.index;
        });
      }
      dom.style.left = item.left - 2 + "px";
      dom.style.top = item.top - 2 + "px";
      dom.style.width = item.width + 4 + "px";
      dom.style.height = item.height + 6 + "px";
      if (item.selected) dom.style.borderWidth = "0px";
      else dom.style.borderWidth = "1px";
      dom.dataset.index = index;
    }
  }
};
</script>
<style lang="scss">
#formFieldCover {
  position: absolute;
  z-index: 9;
  border: 1px dashed #ddd;
  cursor: pointer;
  border-radius: 3px;
}
#formBody {
  .ant-select,
  .ant-time-picker,
  .ant-calendar-picker,
  .ant-btn-default,
  .ant-input-number {
    width: 180px !important;
  }
  .ant-card-body {
    padding: 0px !important;
  }
  .ant-card-bordered {
    border: 0px !important;
    background: none !important;
  }
}
</style>

<style lang="scss" scoped>
.center {
  flex: 1;
  height: 100%;
  overflow-y: auto;
  padding-left: 180px;
  padding-right: 180px;
  display: flex;
  flex-direction: column;
  padding-top: 6px;
  .span {
    flex: 1;
    .tip {
      color: #e8e8e8;
      font-size: 38px;
      padding-top: 156px;
      padding-bottom: 156px;
      text-align: center;
      font-weight: bold;
    }
  }
  .rendering {
    border: 1px dashed #1890ff;
    background: #e6f7ff;
  }
  .formItem {
    padding: 6px 18px 12px 18px;
    cursor: pointer;
    .label {
      height: 26px;
      line-height: 26px;
      padding-bottom: 6px;
    }
    .field {
      line-height: 28px;
    }
  }
  .selected {
    border: 1px dashed #1890ff;
    background: #e6f7ff;
  }
}
</style>

